*{box-sizing:border-box;
    margin:0;
    padding:0;
    }


.navigation{
   position: fixed;
   width: 100%;
   
   z-index: 5;

}

  
 .container{ 
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   
   
 }

 .intro{
   margin-top: 50px;
   font-size: 50px;
   width: 100%;
   text-align: center;
   font-weight: bolder;

 }
 .contents{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 30px;
   column-gap:10px ;
   row-gap: 10px;
 }

 .content1,.content2,.content3,
 .content4,.content5,.content6{
   display: flex;
   
   margin-bottom: 20px;
   width: 400px;
   height: 300px;
   cursor: pointer;
   border-radius: 30px;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   position: relative;
   
 }






 .content1{
   background-color: rgb(52, 48, 48);
 }


.content1text{position:absolute;
   left: 10px;

}
.content1text>*{
   position: absolute;
   
}

.content1logo{
   height: 60px;
   width: 80px;
   top: 1rem;
}
.content1text1{
   color: white;
   font-size: 20px;
  top: 4.5rem;
   font-weight: bold;
}
.content1text2{
   color: white;
   font-size: 40px;
  top: 5rem;
   font-weight: bold;
}
.content1text3{
   color: rgb(222, 72, 72);
   font-size: 40px;
   top: 8rem;
   font-weight: bold;
}

.content1btn{
   background-color: rgb(222, 72, 72);
   color: white;
   border: none;
   border-radius: 30px;
   padding: 5px;
 top: 13rem;
   font-weight: bold;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   transition: all 0.2s;
}
.content1btn:hover{
   transform: scale(1.1);
}
.link1{position: absolute;
   top: 13rem;
}


.content1imgcon{
   top: 2rem;
    z-index: 2;
    width: 60%;
    right: -10px;
    height: 80%;
   
    position: absolute;
    z-index: 2;
}
.content1img{
   width: 100%;
   height: 100%;
}







.content2{
   background-color: rgb(216, 214, 214);
 }


.content2text{position:absolute;
   left: 10px;

}
.content2text>*{
   position: absolute;
   
}



.content2text1{
   color: black;
   font-size: 20px;
  top: 2rem;
   font-weight: bold;
}
.content2text2{
   color: black;
   font-size: 20px;
  top: 3rem;
   font-weight: bold;
}
.content2text3{
   padding: 0;
   margin: 0;
   color: #357EC7;
   font-size: 35px;
   top: 5rem;
   font-weight: bold;
}

.content2text4{
   padding: 0;
   margin: 0;
   color: #357EC7;
   font-size: 35px;
   top: 7rem;
   font-weight: bold;
}

.content2btn{
   background-color: white;
   color: #357EC7;
   border: none;
   border-radius: 30px;
   padding: 5px;
 top: 13rem;
   font-weight: bold;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   transition: all 0.2s;
}
.content2btn:hover{
   transform: scale(1.1);
}
.link2{
   position: absolute;
   top: 13rem;
}
.content2imgcon{
   top: 4rem;
    z-index: 2;
    width: 50%;
    right: 5px;
    height: 60%;
   
    position: absolute;
    z-index: 2;
}
.content2img{
   width: 100%;
   height: 100%;
}





.content3{
   background-color: #357EC7;
 }


.content3text{position:absolute;
   left: 10px;

}
.content3text>*{
   position: absolute;
   
}
.delllogo{
   left:-10px ;
   top: 2rem;
   width: 70px;
   height:60px ;
}



.content3text1{
   color: white;
   font-size: 20px;
  top: 5.5rem;
   font-weight: bold;
}
.content3text2{
   color: black;
   font-size: 20px;
  top: 7rem;
   font-weight: bold;
}
.content3text3{
   padding: 0;
   margin: 0;
   color: #FEDBB7;
   font-size: 30px;
   top: 8.5rem;
   font-weight: bold;
}




.content3btn{
   background-color: white;
   color: #FEDBB7;
   border: none;
   border-radius: 30px;
   padding: 5px;
 top: 13rem;
   font-weight: bold;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   transition: all 0.2s;
}
.content3btn:hover{
   transform: scale(1.1);
}

.link3{position: absolute;
   top: 13rem;
}
.content3imgcon{
   top: 3rem;
    z-index: 2;
    width: 68%;
    right: -10px;
    height: 90%;
   
    position: absolute;
    z-index: 2;
}
.content3img{
   width: 100%;
   height: 100%;
}








.content4{
   position: relative;
   background-color: rgb(222, 72, 72);
  
 }


.content4text{position:absolute;
   right: 0;
   z-index: 1;
   width: 150px;
   
}
.content4text>*{
   position: absolute;
  
   
   
}



.content4logo{ position: absolute;
   z-index: 3;
   top:2.8rem;
   left: -50px;
   height: 50px;
   width: 50px;
}
.content4text1{z-index: 3;
   color: white;
   font-size: 25px;

  top: 3.1rem;
   font-weight: bold;
}
.content4text2{
   color: rgb(12, 12, 12);
   font-size: 20px;
  top:6rem;
   font-weight: bold;
}
.content4text3{
   padding: 0;
   margin: 0;
   color: black;
   font-size: 20px;
   top: 7.5rem;
   font-weight: bold;
  
}
.content4text4{
   padding: 0;
   margin: 0;
   color: black;
   font-size: 20px;
   top: 9rem;
   font-weight: bold;
}




.content4btn{
   position: absolute;
   background-color: white;
   color: black;
   border: none;
   border-radius: 30px;
   padding: 5px;
 top: 13rem;
 right: 60px;
 z-index: 3;
   font-weight: bold;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   transition: all 0.2s;
}

.content4btn:hover{
   transform: scale(1.1);
}
.link4{
   position: absolute;
   right: 30px;
}
.content4imgcon{
  
    z-index: 1;
    width: 80%;
   
   left: -20px;
   
    height: 100%;
   
    position: absolute;
    
}
.content4img{
   width: 100%;
   height: 100%;
}








.content5{
   background-color:#37a05a;
   margin-bottom: 20px;
 }


.content5text{position:absolute;
   left: 10px;
   z-index: 1;
   width: 50%;

}
.content5text>*{
   position: absolute;
   
}




.content5text1{
   color: black;
   font-size: 20px;
  top: 1rem;
   font-weight: bold;
}
.content5text2{
   color: white;
   font-size: 20px;
  top:2.5rem;
   font-weight: bold;
}
.content5text3{
   padding: 0;
   margin: 0;
   color: black;
   font-size: 26px;
   
   top: 6rem;
   font-weight: bold;
}

.content5text4{
   padding: 0;
   margin: 0;
   color: white;
   font-size: 30px;
   top: 10rem;
   font-weight: bold;
}




.content5btn{
   background-color: white;
   color:#37a05a;
   border: none;
   border-radius: 30px;
   padding: 5px;
 top: 13rem;
   font-weight: bold;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   transition: all 0.2s;
}

.content5btn:hover{
   transform: scale(1.1);
}
.link5{
   position: absolute;
   top: 13rem;
}
.content5imgcon{
   top: 2rem;
    z-index: 2;
    width: 50%;
    right: 0;
   top: 60px;
    height: 60%;
   
    position: absolute;
    z-index: 2;
}
.content5img{
   width: 100%;
   height: 100%;
}






.content6{
   background-color: rgb(219, 219, 219);
   margin-bottom: 20px;
 }


.content6text{position:absolute;
   left: 10px;
   z-index: 1;
   width: 50%;

}
.content6text>*{
   position: absolute;
   
}




.content6text1{
   color: black;
   font-size: 20px;
   top:7rem;
   font-weight: bold;
}
.content6text2{
   color: gray;
   font-size: 20px;
  top:9rem;
   font-weight: bold;
}
.content6text3{
   padding: 0;
   margin: 0;
   color: black;
   font-size: 30px;
   
   top: 10.5rem;
   font-weight: bold;
}




.hplogo{
   left:-5px ;
   top: 2.5rem;
   width: 70px;
   height:60px ;


}


.content6btn{
   background-color: #4E2728;
   color:white;
   border: none;
   border-radius: 30px;
   padding: 5px;
 top: 14rem;
   font-weight: bold;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   transition: all 0.2s;
}

.content6btn:hover{
   transform: scale(1.1);
}
.link6{
   position: absolute;
   top: 14rem;
}
.content6imgcon{
   top: 3rem;
   z-index: 2;
   width: 70%;
   right: -20px;
   height: 90%;
    position: absolute;
    z-index: 2;
}
.content6img{
   width: 100%;
   height: 100%;
}

.footer{
   border: none;
   display: flex;
   flex-direction: row;
 margin-top:10px ;

   justify-content: space-around;
   align-items: center;
   width: 100%;
   height: 50px;
   
}




.footer1,.footer2,
.footer3,.footer4{
   display: flex;
   justify-content: space-around;
   flex-direction: row;

   align-items: center;
   
 
}
.footer1imgcon{
   height: 100%;
   width: 60px;
}
.footer1img{
   width: 100%;
   height: 100%;
}

.footer1text{
   margin-left: 10px;
}
.footer1text1{
   font-weight: bold;
   font-size: 10px;
   margin: 0;
   padding-top: 0;
}
.footer1text2{
   font-size: 15px;
   opacity: 0.7;
   margin: 0;
   padding-top: 0;
}




.footer2imgcon{
   height: 100%;
   width: 60px;
}
.footer2img{
   width: 100%;
   height: 100%;
}

.footer2text{
   margin-left: 10px;
}
.footer2text1{
   font-weight: bold;
   font-size: 10px;
   margin: 0;
   padding-top: 0;
}
.footer2text2{
   font-size: 15px;
   opacity: 0.7;
   margin: 0;
   padding-top: 0;
}




.footer3imgcon{
   height: 100%;
   width: 60px;
}
.footer3img{
   width: 100%;
   height: 100%;
}

.footer3text{
   margin-left: 10px;
}
.footer3text1{
   font-weight: bold;
   font-size: 10px;
   margin: 0;
   padding-top: 0;
}
.footer3text2{
   font-size: 15px;
   opacity: 0.7;
   margin: 0;
   padding-top: 0;
}



.footer4imgcon{
   height: 100%;
   width: 60px;
}
.footer4img{
   width: 100%;
   height: 50px;
}

.footer4text{
   margin-left: 10px;
}
.footer4text1{
   font-weight: bolder;
   font-size: 10px;
   margin: 0;
   padding-top: 0;
}
.footer4text2{
   font-size: 15px;
   opacity: 0.7;
   margin: 0;
   padding-top: 0;
}

.socialtext{
   width: 100%;
   font-weight: bolder;
   text-align: center;
   padding: 0;
   margin: 0;
}
.socials{
  
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: center;
   align-items: center;
  
   height:50px ;
   margin-bottom: 20px;
}


.social1,
.social2,
.social3,
.social4{
   display: flex;
   flex-direction: row;
   margin-left: 10px;
   align-items: center;
   height:50px;
   width: 40px;
}
.social1img{
   height:40px ;
}
.social2img{
   height:40px ;
}
.social3img{
   height:40px ;
}
.social4img{
   height:40px ;
}
.social5{
   height:40px ;
}

.social4{
   height: 40px;
 
   border-radius: 50%;
   background-color: rgb(8, 74, 129);
}
.social4img{
   margin-left: 5px;
}









@media (max-width:600px){
   
   
 
   
   .container{display: flex;
   
justify-content: center;} 


.header{
  
}
 
 .intro{
   margin-top: 20px;
   font-size: 35px;
   font-weight: bolder;
   margin-top: 70px;
 }
  .contents{
   display: flex;
   flex-direction:row ;
   flex-wrap: wrap;
   justify-content: center;

  }

   .content1,.content2,.content3,
 .content4,.content5,.content6{
   width: 350px;
 
   
 }

 
 .content1text3{
   font-size: 35px;
 }
.content2text1{
   top:4rem ;
}
.content2text2{
   top:5.5rem ;
}


 .content2text3{
   
top: 8rem;
   font-size: 30px;

 }
 .content2text4{
   
   top: 10rem;
      font-size: 30px;
   
    }
    .content3imgcon{
      right: 10px;
    }
    .delllogo{
      top: 4rem;
    }
    .content3text1{
      top:8rem ;
    }
    .content3text2{
      top:9.5rem ;
    }
 .content3text3{
   top:11rem ;
      font-size:25px ;
    }
 


    .content4text1{
      top: 5.8rem;
     right: 50px;
      font-size: 22px;
    }
    .content4imgcon{
      right: 0;}
      .content4logo{
         position: absolute;
         top: 5.4rem;
         left: -8px;
      }
     
 .content4text2{
   top: 8rem;
   font-size: 22px;
 }

 .content4text3{
   top: 10rem;
   font-size: 26px;
 }

.content5text{
   width:350px ;
}
 .content5text1{
   top:5rem ;
  font-size: 15px;
 }
 .content5text2{
   top: 7rem;
font-size: 13px;
 }
 .content5text3{
   top:8.5rem ;
   font-size:20px ;
 }
 .content5text4{
   top:10rem ;
   font-size:20px ;
 }

.hplogo{
   top:4rem ;
}
   .content6text1{
      top:8rem;
      font-size: 18px;
   }
   .content6text2{
      top: 9.5rem;
      font-size: 19px;
   }
   .content6text3{
      top: 11rem;
   }
  
   .content6imgcon{
      width: 70%;
      height: 85%;
      right: -20px;
       }


       .footer{
      align-items: center;
     width: 330px;
     margin-left: 30px;
       }
       .footer1imgcon{
         height: 100%;
         width: 35px;}
      .footer1img{
         width: 100%;
         height: 100%;
      }
      
      .footer1text{
         margin-left: 5px;
      }
      .footer1text1{
         font-weight: bold;
         font-size: 6px;
         margin: 0;
         padding-top: 0;
      }
      .footer1text2{
         font-size: 8px;
         opacity: 0.7;
         margin: 0;
         padding-top: 0;
      }
      
      
      
      
      .footer2imgcon{
         height: 100%;
         width: 35px;
      }
      .footer2img{
         width: 100%;
         height: 100%;
      }
      
      .footer2text{
         margin-left: 5px;
      }
      .footer2text1{
         font-weight: bold;
         font-size: 6px;
         margin: 0;
         padding-top: 0;

      }
      .footer2text2{
         font-size: 8px;
         opacity: 0.7;
         margin: 0;
         padding-top: 0;

      }
      
      
      
      
      .footer3imgcon{
         height: 100%;
         width: 25px;
      }
      .footer3img{
         width: 100%;
         height: 100%;
      }
      
      .footer3text{
         margin-left: 5px;}
      .footer3text1{
         font-weight: bold;
         font-size: 6px;
         margin: 0;
         padding-top: 0;

      }
      .footer3text2{
         font-size: 8px;
         opacity: 0.7;
         margin: 0;
         padding-top: 0;

      }
      
      
      
      .footer4imgcon{
         height: 70%;
         width: 20px;
      }
      .footer4img{
         width: 100%;
         height: 30px;
      }
      
      .footer4text{
         margin-left: 2px;
      }
      .footer4text1{
         font-weight: bold;
         font-size: 6px;
         margin: 0;
         padding-top: 0;

      }
      .footer4text2{
         font-size: 8px;
         opacity: 0.7;
         margin: 0;
         padding-top: 0;

      }
      .socials{
         width: 350px;
         margin-left: 25px;
      }
      .socialtext{
        text-align: center;
         width: 100%;
         font-size: 10px;
         font-weight: bolder;
      }
   }